import Vue from 'vue'
import VueRouter from 'vue-router'
import Manage from "@/views/Manage";
import store from "@/store";
import Login from "@/views/Login";
import Register from "@/views/Register";
import Person from "@/views/Person";
import password from "@/views/password";

Vue.use(VueRouter)

const routes = [
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/register',
        name: 'Register',
        component: Register
    },
    {
        path: '/404',
        name: '404',
        component: () => import("../views/404")
    },
    {
        path: '/front',
        name: 'Front',
        component: () => import("../views/front/Front"),
        redirect:"/front/home",
        children: [
            {
                path:'home',
                name:'FrontHome',
                component: () => import("../views/front/Home"),
            },
            {
                path:'video',
                name:'Video',
                component: () => import("../views/front/Video"),
            },
            {
                path:'videoDetail',
                name:'VideoDetail',
                component: () => import("../views/front/VideoDetail"),
            },
            {
                path:'password',
                name:'FrontPassword',
                component: () => import("../views/front/password"),
            },
            {
                path:'person',
                name:'FrontPerson',
                component: () => import("../views/front/Person"),
            },
            {
                path:'love',
                name:'Love',
                component: () => import("../views/front/Love"),
            },
            {
                path:'akuiYA',
                name:'AkuiYA',
                component: () => import("../views/front/AkuiYA"),
            },
            {
                path:'luB',
                name:'LuB',
                component: () => import("../views/front/LuB"),
            },
            {
                path:'plot',
                name:'Plot',
                component: () => import("../views/front/Plot"),
            },
        ]
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
// 提供一个重置路由的方法
export const resetRouter = () => {
    router.matcher = new VueRouter({
        mode: 'history',
        base: process.env.BASE_URL,
        routes
    })
}
let itemMenuOne
let itemMenuTwo
// 注意:刷新页面会导致页面路由重置
export const setRoutes = () => {
    const storeMenus = localStorage.getItem("menus");
    if (storeMenus) {
        // 获取当前的路由对象名称数组
        const currentRouteNames = router.getRoutes().map(v => v.name)
        if (!currentRouteNames.includes('Manage')) {
            // 拼装动态路由
            const manageRoute = {
                path: '/',
                name: 'Manage',
                component: () => import('../views/Manage.vue'),
                redirect: "/home",
                children: [
                    {
                        path: 'person',
                        name: "个人信息",
                        component: Person
                    },
                    {
                        path: 'password',
                        name: "修改密码",
                        component: password
                    }
                ]
            }
            const menus = JSON.parse(storeMenus)
            menus.forEach(item => {
                if (item.path) { //当且仅当path不为空的时候才去设置路由
                    itemMenuOne = {
                        path: item.path.replace("/", ""),
                        name: item.name,
                        component: () => import('../views/' + item.pagePath + '.vue')
                    }
                    manageRoute.children.push(itemMenuOne)
                } else if (item.children.length) {
                    item.children.forEach(item => {
                        if (item.path) {
                            itemMenuTwo = {
                                path: item.path.replace("/", ""),
                                name: item.name,
                                component: () => import('../views/' + item.pagePath + '.vue')
                            }
                            manageRoute.children.push(itemMenuTwo)
                        }
                    })
                }
            })
            // 动态添加到现在的路由对象中去
            router.addRoute(manageRoute)
        }
    }
}
// 重置就再set一次路由
setRoutes()

router.beforeEach((to, from, next) => {
    // console.log(to);
    // console.log(from);
    localStorage.setItem("currentPathName", to.name) // 设置当前路由名称，为了再Header中去使用
    store.commit("setPath") // 触发store的数据更新
    if (!to.matched.length) { // 未找到路由的情况
        const storeMenus = localStorage.getItem("menus")
        if (storeMenus) {
            next("/404") // 放行路由
        } else {
            // 跳回登录页面
            next("/login")
        }
    }
    // 其他情况都放行
    next()
})

export default router
